<template>
	<view style="height: 500rpx;"><qiun-data-charts type="line" :opts="opt" :chartData="chartData" background="none" :ontouch="true" /></view>
</template>

<script>
export default {
	props: {
		count: {
			type: Array | Object,
			default() {
				return null;
			}
		}
	},
	data() {
		return {
			chartData: {}
		};
	},
	created() {
		this.init();
	},
	watch: {
		count(n) {
			this.init();
		}
	},
	methods: {
		init() {
			if (this.count) {
				let series = [
					{
						name: '实名制进场人数',
						data: [],
						type: 'point',
						color: '#4D94F3'
					},
					{
						name: '考勤总人数',
						data: [],
						type: 'point',
						color: '#FDCD37'
					}
				];
				for (let i in this.count) {
					series[0].data.push(this.count[i].staffs);
					series[1].data.push(this.count[i].atdStaffs);
				}
				let chartData = {
					categories: this.count.map(i => {
						return i.districtName;
					}),
					series: series
				};
				this.chartData = chartData;
			} else {
				this.chartData = {};
				console.error('首页统计图', '项目情况无数据');
			}
		}
	},
	computed: {
		opt() {
			return {
				dataPointShapeType: 'hollow',
				enableScroll: true,
				xAxis: {
					disabled: false,
					axisLine: true,
					axisLineColor: '#CCCCCC',
					calibration: false,
					fontColor: '#666666',
					fontSize: 10,
					rotateLabel: false,
					itemCount: 7,
					boundaryGap: 'center',
					disableGrid: true,
					gridColor: '#CCCCCC',
					gridType: 'solid',
					gridEval: 1,
					scrollShow: true,
					scrollAlign: 'left',
					scrollColor: '#A6A6A6',
					scrollBackgroundColor: '#EFEBEF'
				},
				yAxis: {
					disabled: false,
					disableGrid: false,
					splitNumber: 5,
					gridType: 'dash',
					dashLength: 2,
					gridColor: '#CCCCCC',
					padding: 10,
					showTitle: false,
					min: 0
				},
				legend: {
					show: true,
					position: 'bottom',
					float: 'center',
					padding: 5,
					margin: 5,
					backgroundColor: 'rgba(0,0,0,0)',
					borderColor: 'rgba(0,0,0,0)',
					borderWidth: 0,
					fontSize: 10,
					fontColor: '#666666',
					lineHeight: 11,
					hiddenColor: '#CECECE',
					itemGap: 10
				},
				extra: {
					line: {
						type: 'straight',
						width: 2
					},
					tooltip: {
						showBox: true,
						showArrow: true,
						showCategory: false,
						borderWidth: 0,
						borderRadius: 0,
						borderColor: '#000000',
						borderOpacity: 0.7,
						bgColor: '#000000',
						bgOpacity: 0.7,
						gridType: 'solid',
						dashLength: 4,
						gridColor: '#CCCCCC',
						fontColor: '#FFFFFF',
						splitLine: true,
						horizentalLine: false,
						xAxisLabel: false,
						yAxisLabel: false,
						labelBgColor: '#FFFFFF',
						labelBgOpacity: 0.7,
						labelFontColor: '#666666'
					},
					markLine: {
						type: 'solid',
						dashLength: 4,
						data: []
					}
				}
			};
		}
	}
};
</script>

<style></style>
